<template>
  <div>
    <div class="JS_container">
      <Card class="card">
        <div class="searchTmInput marginB10" style="width:650px;">
          <Input
            search
            enter-button="立即查询"
            autofocus
            v-model="trademark_name"
            ref="oop"
            size="large"
            @on-search="searchCe"
            placeholder="请输入商标名称"
          >
            <div slot="prepend" class="pointer textLeft" @click="f_45BoxC=!f_45BoxC" style="width:130px;">
              第{{fcgnum}}类 - {{owrX()}}
              <Icon :type="(!!f_45BoxC)?'ios-arrow-up':'ios-arrow-down'" class="pullRight" />
            </div>
          </Input>

          <div v-show="f_45BoxC">
            <div class="f_45ModalBox textLeft">
              <Button
                  v-for="(val) in listcCm"
                  :key="'dr'+val.fcgid"
                  shape="circle"
                  :type="fcgnum==val.fcgnum?'primary':'text'"
                  @click="werC(val.fcgnum)"
              >
                  第{{val.fcgnum}}类 - {{val.fcgname}}
              </Button>
            </div>
            <div class="f_45MoBg"  @click="f_45BoxC=false"></div>
          </div>
        </div>
        
        <div class="paddingT10 paddingB10 clearfix" v-show="isShowPic">
          <i-circle class="annulus marginR20 pullLeft" :percent="percent" :stroke-color="color" :stroke-width="8" :trail-width="8">
            <span style="font-size:24px">{{ percent }}%</span>
          </i-circle>
          <div class="f_18">
            <div
              class="marginB10 marginT10 lineH2"
              :style="{color: color}"
            >
              "{{resTrademark_name}}" 商标 "第{{resFcgnum}}类 -  {{owrX()}}" {{resultString}}
            </div>
            <div class="open">
              <span class="probability" @click="showModel" v-show="$app.judgeData(result)">
                {{!$app.judgeData(report_id) ?'商标分析完整报告':'已购买报告，立即查看'}}
              </span>
              <span 
                class="probability"
                :class="(percent>30)?' ':' noD'"
                @click="register"
              >
                立即注册
              </span>
              <span v-show="$app.judgeData(max_rate) && max_rate>50"
                class="probability cBlue borderNone"
                @click="ongtW"
              >
                担保注册
              </span>
            </div>
          </div>
        </div>

        

        <div  v-show="!loading && $app.judgeData(result)">

          <div class="marginB10 marginT10">
            服务猫为您找到相关结果
            <span class="cBlue">{{total}}</span>个，当前第
            <span class="cBlue">{{page}}</span> 页
          </div>

          <ul class="search-list">
            <ComList :result="result"/>
          </ul>
          <div class="marginT10 ">
            <Page
              :total="total>max_total?max_total:total"
              show-total
              show-sizer
              show-elevator
              size="small"
              :page-size="pageSize"
              :page-size-opts="$app.pageAll.pageSizeOpts"
              :current="page"
              @on-change="loadMore"
              @on-page-size-change="changePageSize"
            ></Page>
          </div>
        </div>
        <div class="f_24 lineH2 cCCC textLeft " v-show="!loading && !$app.judgeData(result)">暂无结果</div>
        <div class="f_24 lineH2 cCCC textLeft " v-show="loading">正在加载...</div>
      </Card>
    </div>
    

    <!-- 商标报告购买框 -->
    <Modal
      v-model="modal1" 
      width="750"
      :mask-closable="false"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <div class="JS_pay clearfix">
        <div class="left">
          <h2>商标分析完整报告</h2>
          <img src="../img/figures.png" alt="商标分析完成报告" />
        </div>

        <!-- 没有购买包年套餐 -->
        <div class="right" v-if="!youMai300">
          <div class="btn" :class="{active:flag ==1}" @click="flag=1">
            <img src="../img/pay-2.png" alt="包年" />
            <span>分析报告套餐</span>
            <em>¥{{priceNian()}}元/份</em>
            <p>500元(猫币可用),含300份报告</p>
          </div>
          <div class="btn" :class="{active:flag==2}" id="once" @click="flag=2">
            <img src="../img/pay-1.png" alt="单次" />
            <span>分析报告单次</span>
            <em>¥{{priceYici()}}元/份</em>
          </div>
        </div>

        <!-- 已经购买包年套餐 -->
        <div v-else class="right">
          <div class="btn">
            <img src="../img/pay-2.png" alt="包年" />
            <span
              style="color: #e1584c;font-size: 16px"
            >
              已购买套餐，剩余 {{$app.judgeData(service_item) && (service_item.num-service_item.used_num)}} 
              / {{$app.judgeData(service_item) && service_item.num}}个报告
            </span>
          </div>
        </div>

        
      </div>
    </Modal>

    <!-- 下单成功支付框 -->
    <PayBox ref="payBox" />

  </div>
</template>

<style lang="less" scoped> 
@import '../less/fenLei45.less';
.probability{
  font-size: 16px;
  margin-right: 20px;
  color: #ec6941;
  font-weight: bold;
  border-bottom: 1px solid #ec6941;
  cursor: pointer;
}
.probability.noD{
  cursor: auto;
  border:none;
  color:#ccc;
}
</style>


<script>
import PayBox from "@$@/_service/payBox";
import ComList from "./common/comList";
export default {
  name: "Trademarklist",
  components: { PayBox,ComList },
  data() {
    let {
      $route: {
        query: { query_key: trademark_name, fcgnum }
      }
    } = this;
    let data={
      trademark_name,
      fcgnum,
      resTrademark_name: trademark_name,
      resFcgnum: fcgnum,
      percent: 0, // 概率
      max_rate:false,//担保注册
      
      listcCm:[],// 商标45类，只有第一级
      result: [], // 搜索结果
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize, // 默认数据返回条数

      max_total:0,//最大条数
      total: 0, // 所有数据条数
      total_page: 0, // 所有页面
      service_item: {}, //包年信息

      flag: 1, // 标识包年/单次
      report_id: "", // 报告id 为空，既为没有购买
      isShowPic: false
    };
    let tool={
      modal1: false,//弹框
      loading: true, //正在加载中
      f_45BoxC:false,
    };
    return Object.assign(data,tool);
  },
  created(){
    // 获取45类分类 第一级
    $ajax.mGlistAll({
      fcgparent:0
    },resData=>{
      this.listcCm=resData;
    });
  },
  
  // 挂载
  mounted() {
    this.getTmList();
  },
  methods: {
    
    //45类选择框
    werC(num){
        this.fcgnum=num;
        this.f_45BoxC=false;
    },
    owrX(){
      let {
          fcgnum,
          listcCm
      }=this;
      let out='';
      for (let i=0; i < listcCm.length; i++) {
        if(fcgnum==listcCm[i].fcgnum){
          out=listcCm[i].fcgname;
          break;
        }
      }
      return out;
    },
    //判断输入框不能为空
    query_key_Had(callBack){
      let {
        trademark_name
      }=this;

      if($app.judgeData($app.delSpace(trademark_name))){
        callBack()
      }else{
        this.$Message.error({content:'请输入商标名称'});
        this.$refs["oop"].focus();
        this.query_key='';
      }

    },
    // 搜索
    searchCe() {
      this.page = 1;
      this.query_key_Had(()=>{
        this.getTmList();
      });
    },
    // 第一次获取数据
    getTmList() {
      let {
        $route: {
          query: { query_key: trademark_name, fcgnum }
        }
      } = this;
      let {
        fcgnum:inter_type,
        page,
        pageSize
      } = this;

      let query_go='';
      if(fcgnum==inter_type && this.trademark_name==trademark_name){
        this.trademark_name=trademark_name;
        query_go=trademark_name;
      }else{
        query_go=this.trademark_name;
      }

      if(!$app.judgeData($app.delSpace(query_go))){
        this.trademark_name=trademark_name;
        query_go=trademark_name;
      }

      this.result = [];
      this.loading = true;

      $ajax.lb_getTmSearch({ trademark_name:query_go, inter_type, page, pageSize },resData => {
        this.loading = false;
        this.resTrademark_name = query_go;

        this.resFcgnum = inter_type;
        this.result = resData.list;
        this.total = resData.total;
        this.max_total = resData.max_total;
        this.total_page = resData.total_page;

        // 替换地址栏
        this.$router.replace({
            name: "Trademarklist",
            query: {
              fcgnum:inter_type,
              query_key:query_go
            }
        });


        this.isShowPic = true;

        if (page == 1) {
          this.max_rate=resData.max_rate;//最大成功率
          this.percent = resData.rate;//旧版的 成功率，后期不用了
          this.report_id = resData.report_id; // 报告id 为空，既为没有购买
          this.service_item = resData.service_item;// 商标300份的购买信息，没有买，直接没有这个字段
        }

      });

    },
    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getTmList();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTmList();
    },
    //判断输入框不能为空
    judKeyVal(){
      let { 
        trademark_name
      } = this;
    },


    // 商标注册
    register() {
      let {percent}=this;
      if(percent>30){
        $app.goSaKnowP(200,this.trademark_name);// 页面跳转
      }
    },
    //担保注册
    ongtW(){
      $app.goSaKnowP(209,this.trademark_name);// 页面跳转
    },
    // 商标分析
    ok() {
      let that = this;
      const type = this.flag; // 1 包年 2 单次
      const tm_name = this.trademark_name; // 商标名称
      const tm_type = this.resFcgnum; // 商标分类
      $ajax.lb_getTmReportBuy({ type, tm_name, tm_type }, res => {
        this.report_id = res.data.report_id;
        const order_id = res.data.order_id;
        // const order_no = res.data.order_no;

        if ($app.judgeData(this.report_id)) {
          // 套餐购买
          $app.toast(res.msg, true, () => {
            $app.openTmReport(that.report_id);
          });
        } else {
          $app.payBoxShow(that, order_id);
        }
      });
    },
    cancel() {
      // 默认推荐
      this.flag = 1;
    },
    showModel() {
      const report_id = this.report_id;
      if ($app.judgeData(report_id)) {
        this.modal1 = false;
        $app.openTmReport(report_id); //打开新页面查看商标购买报告
      } else {
        this.modal1 = true;
      }
    },
    //商标分析报告-包年单价
    priceNian(){
      let poor = $app.getSession('bigSetting').tm_report[0];//[0]包年
      let out = (poor.price / poor.count).toFixed(1);//四舍五入，保留小数点1位
      return out;
    },
    //商标分析报告-单次单价
    priceYici(){
      let out=$app.getSession('bigSetting').tm_report[1].price;//[1]单次
      return out;
    }
  },
  computed: {
    //false没有购买300分的商标报告，true有购买300分的商标报告
    youMai300(){
      let {
        service_item
      }=this;
      let out = false;
      
      if ($app.judgeData(service_item)) {
        let {
          num,//总数
          used_num//已使用次数
        }=service_item;
        out = (num-used_num > 0);//商标分析报告，包年套餐，剩余购买的数量
      }

      return out;
    },
    //  字体颜色
    color() {
      let color = "#E23333";
      if (this.percent <= 50) {
        color = "#E23333";
      } else if (this.percent <= 70) {
        color = "#1B91F3";
      } else {
        color = "#0CAA70";
      }
      return color;
    },
    // 建议
    resultString() {
      const percent = this.percent;
      if (percent < 50) {
        return "成功率较低,不建议注册";
      } else if (percent < 60) {
        return "成功率较一般";
      } else if (percent < 70) {
        return "成功率正常,建议获取商标分析完整报告";
      } else {
        return "成功率较高,建议立即注册";
      }
    }
  }
};
</script>
